<template>
  <div>
    <div class="tab">
      <router-link to="/login/phone" tag="a">登录</router-link>
      <router-link to="/login/user" tag="a">注册</router-link>
    </div>
    <router-view></router-view>

  
    <div class="logon">
      <img src="../../assets/greylogo.png" />
    </div>

    <div class="bottomProtocol">
      <label for="label">
        <input type="checkbox" id="label" checked="true" />我已阅读并同意
        <a class="green">《易果服务协议》</a>和
        <a class="green">《隐私条款》</a>
      </label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  components: {},

  methods: {},
};
</script>

<style  lang="scss" >
.tab {
  border-top: solid 0.0625rem #ccc;
  background-color: #ffffff;
  height: 4.17rem;
  width: 100%;
  display: flex;
  text-align: center;
  z-index: 100;
  a {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 1rem;
    text-decoration: none;
    color: #8d8a8a;

    &.router-link-exact-active {
      color: #42b983;
      border-bottom-style: solid;
      border-bottom-color: #42b983;
    }
  }
}



.logon {
  margin-top: 1.754981rem;
  text-align: center;
}

.bottomProtocol {
  position: fixed;
  width: 100%;
  left: 5%;
  line-height: 1.00015rem;
  bottom: 2.1324rem;
  font-size: 0.754831rem;
  color: #666;
  label {
    position: relative;
    margin-left: 1.19rem;
    padding-left: 0.66rem;
    input {
      border: none;
      outline: none;
      width: 1rem;
      height: 1rem;
      position: absolute;
      top: -0.0625rem;
      left: -0.375rem;
      display: inline-block;
    }
    input:checked {
      background: url(../../assets/checkbox_yes.png) 50% no-repeat;
      background-size: 100% auto;
    }
    a {
      color: #01b27a;
    }
  }
}
</style>